<template>
	<div class="pl-6 pr-6 pt-6">
		<el-card class="!border-none p-4" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				数据统计
			</div>
			<div class="flex flex-wrap main-color mt-14">
			    <div
			        class="md:w-[20%] w-1/4 flex flex-col items-center"
			    >
					<el-icon :size="62" color="#4C8CF5"><Document /></el-icon>
					<div class="mt-4 text-2xl">11</div>
					<div class="mt-2 text-xl">年度累计订单数量</div>
			    </div>
				<div
				    class="md:w-[20%] w-1/4 flex flex-col items-center"
				>
					<el-icon :size="62" color="#4C8CF5"><Document /></el-icon>
					<div class="mt-4 text-2xl">11</div>
					<div class="mt-2 text-xl">年度累计吨位</div>
				</div>
				<div
				    class="md:w-[20%] w-1/4 flex flex-col items-center"
				>
					<el-icon :size="62" color="#4C8CF5"><Document /></el-icon>
					<div class="mt-4 text-2xl">11</div>
					<div class="mt-2 text-xl">年度累计采购金额</div>
				</div>
				<div
				    class="md:w-[20%] w-1/4 flex flex-col items-center"
				>
					<el-icon :size="62" color="#4C8CF5"><Document /></el-icon>
					<div class="mt-4 text-2xl">11</div>
					<div class="mt-2 text-xl">订单投诉率</div>
				</div>
				<div
				    class="md:w-[20%] w-1/4 flex flex-col items-center"
				>
					<el-icon :size="62" color="#4C8CF5"><Document /></el-icon>
					<div class="mt-4 text-2xl">11</div>
					<div class="mt-2 text-xl">订单延误率</div>
				</div>
			</div>
		</el-card>
		<el-card class="!border-none p-4 mt-[30px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-8">
				订单列表
			</div>
			<div class="flex text-xl">
				<div class="mr-[30px]">
					<span class="main-color">总订单：</span><span class="main-color1">1000</span>
				</div>
				<div class="mr-[30px]">
					<span class="main-color">投诉订单：</span><span class="main-color1">1000</span>
				</div>
				<div>
					<span class="main-color">延误订单：</span><span class="main-color1">1000</span>
				</div>
			</div>
			<el-table class="mt-[20px]" size="large" :data="pager.lists" v-loading="pager.loading"
			:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
			:cell-style="{'color':'#0054A6','padding':'20px 0'}"
			>
			    <el-table-column label="订单编号" prop="scene_name" align="center" >
					<template #default="{ row }">
					    <span class="main-color">{{row.scene_name}}</span>
					</template>
				</el-table-column>
			    <el-table-column label="采购编码" prop="type_desc" align="center" />
				<el-table-column label="投诉" prop="type_desc" align="center" />
			   <el-table-column label="延误" prop="scene_name" align="center" >
			   	<template #default="{ row }">
			   	    <span class="main-color">{{row.scene_name}}</span>
			   	</template>
			   </el-table-column>
			    <el-table-column label="操作" fixed="right" align="center" >
			        <template #default="{ row }">
			            <el-button 
						type="primary" 
						link
						@click="detailFunc(row.id)"
						>
			                <span class="main-color1">查看</span>
						</el-button>
			        </template>
			    </el-table-column>
			</el-table>
		</el-card>	
	</div>
</template>

<script lang="ts" setup name="notice">
import { noticeLists } from '@/api/message'
import { usePaging } from '@/hooks/usePaging'
import { getRoutePath } from '@/router'
import feedback from '@/utils/feedback'
const centerDialogVisible = ref(false)
const formData = reactive({
	admin_name: '',
	url: '',
	ip: '',
	type: '',
	start_time: '',
	end_time: ''
})
	
enum NoticeEnums {
    All = 1,
    PLATFORM = 2,
	HasRead = 3
}

const tabsActive = ref(NoticeEnums.All)
//查看详情
const detailFunc = async(row) => {
	console.log(row,'row')
	centerDialogVisible.value = true
}
// 列表数据
const params = reactive({
    recipient: tabsActive
})
const { pager, getLists } = usePaging({
    fetchFun: noticeLists,
    params
})
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    // await menuDelete({ id })
    getLists()
}
onActivated(() => {
    getLists()
})

getLists()
</script>

<style>
</style>